<template>
  <div class="mainos">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10 maincla_form">
        <el-form
          :inline="true"
          :rules="rules"
          :model="monitorForm"
          class="demo-form-inline marginTop0"
          ref="userListFrom"
          label-width="60px"
          hide-required-asterisk
        >
          <div class="main_crumbs boxdq">
            <div class="main_crumbs_l">
              <a href="javascript:;" @click="$router.back(-1)">
                <i class="el-icon-arrow-down"></i>返回
              </a>
              <em>|</em>
              <span>录单</span>
            </div>
          </div>
          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>单据信息</div>
          </div>
          <div class="main_xq">
            <ul class="boxha">
              <li>
                采购单号：<span>{{ info.order_sn }}</span>
              </li>
              <li>
                采购方式：<span>{{ base.mode[info.mode] }}</span>
              </li>
              <li v-if="info.mode == 1 || info.mode == 2">
                采购员/供应商：<span>{{
                  info.mode == 1
                    ? base.buyer[info.buyer_id]
                    : base.supplier[info.supplier_id]
                }}</span>
              </li>
              <li v-if="info.mode == 3">
                采购员/供应商：<span>{{
                  base.direct_supply[info.supplier_id]
                }}</span>
              </li>
              <li>
                类型：<span>{{ base.type[info.type] }}</span>
              </li>
              <li>
                单据状态：<span>{{ base.status[info.status] }}</span>
              </li>
              <li>
                采购日期：<span>{{
                  parseTime(info.purchase_time, "{y}-{m}-{d}")
                }}</span>
              </li>
              <li>
                需采购品种：<span>{{ info.all }}</span>
              </li>
              <li>
                已采购品种：<span>{{ info.ed }}</span>
              </li>
            </ul>
          </div>
          <div class="main_tile boxdq marginTop15">
            <div class="main_tile_l marginLeft0"><em></em>商品详情</div>
          </div>
          <div class="main_white padding10 marginBottom10">
            <div class="main_white">
              <div class="mainor_sp boxha">
                <ul class="box">
                  <li class="box">
                    <!-- <span>商品名称： </span> -->
                    <el-input
                      v-model.trim="formsp.value"
                      ref="focusw2"
                      placeholder="商品名称"
                      clearable
                      class="wid240"
                      @keyup.enter.native="mainor_qr"
                    ></el-input>
                  </li>
                </ul>
                <div class="marginBottom10" style="flex: 1">
                  <el-button type="primary" @click="mainor_qr"
                    >置顶(回车)</el-button
                  >
                  <!-- <el-button
                    class="reset marginLeft5"
                    type="info"
                    @click="formsp.value = ''"
                    >重置</el-button
                  > -->
                </div>
                <div class="table_tips">
                  <p>可使用方向键控制输入框</p>
                </div>
              </div>
              <div class="main_table marginTop0">
                <el-table
                  ref="multipleTable"
                  :data="monitorForm.list"
                  v-loading="table_loading"
                  element-loading-text="加载中"
                  fit
                  border
                  highlight-current-row
                  :header-cell-class-name="this.$verticaline"
                >
                  <el-table-column label="序号">
                    <template slot-scope="scope">{{
                      scope.$index + 1
                    }}</template>
                  </el-table-column>
                  <el-table-column
                    label="商品名称"
                    show-overflow-tooltip
                    prop="name"
                    width="150"
                  >
                    <template slot-scope="scope"
                      >{{ scope.row.name }}【{{
                        scope.row.spu_name
                      }}】</template
                    >
                  </el-table-column>
                  <el-table-column
                    label="单位"
                    show-overflow-tooltip
                    prop="unit"
                  />
                  <el-table-column
                    label="状态"
                    show-overflow-tooltip
                    prop="unit_name"
                  >
                    <template slot-scope="scope">
                      <span :class="'status' + scope.row.status"
                        >{{ scope.row.status == 0 ? "采购中" : "采购完成" }}
                      </span></template
                    >
                  </el-table-column>
                  <el-table-column
                    label="近一次采购价"
                    prop="purchase_price"
                    width="120"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    label="需采量"
                    prop="purchase_num"
                    class-name="main_hei"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    label="未采量"
                    prop="un_purchase_num"
                    class-name="main_hei"
                    show-overflow-tooltip
                    min-width="90"
                  >
                    <div slot="header">
                      <span> 未采量 </span>
                      <el-tooltip class="item" effect="dark" placement="bottom">
                        <div slot="content">
                          注释：字体红色并加粗的，是已经进行了部分录入的
                        </div>
                        <svg
                          aria-hidden="true"
                          class="navbar_svg new_navbar_svg"
                          width="14"
                          height="14"
                        >
                          <use xlink:href="#icon-summary_question" />
                        </svg>
                      </el-tooltip>
                    </div>
                    <template slot-scope="scope">
                      <span
                        :class="{
                          un_purchase_num_tips: scope.row.un_purchase_num_tips
                        }"
                      >
                        {{ scope.row.un_purchase_num }}
                      </span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="数量"
                    prop="num"
                    width="150"
                    class-name="main_hei"
                  >
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'list.' + scope.$index + '.num'"
                        :rules="rules.num"
                      >
                        <el-input
                          v-model.trim="scope.row.num"
                          placeholder="数量"
                          class="wid110"
                          :ref="'num' + scope.$index"
                          @input="val => inputchnage(val, scope, 0)"
                          :disabled="scope.row.disabled"
                          @keyup.native="keyPress($event, scope.$index, 1)"
                        ></el-input>
                      </el-form-item>
                      <!-- @focus="inputFocus(scope, 'num')" -->
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="单价"
                    prop="price"
                    width="150"
                    class-name="main_hei"
                  >
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'list.' + scope.$index + '.price'"
                        :rules="rules.price"
                      >
                        <el-input
                          v-model.trim="scope.row.price"
                          placeholder="单价"
                          class="wid110"
                          :ref="'price' + scope.$index"
                          @input="val => inputchnage(val, scope, 1)"
                          :disabled="scope.row.disabled"
                          @keyup.native="keyPress($event, scope.$index, 2)"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="小计"
                    prop="market_price"
                    width="150"
                    class-name="main_hei"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model.trim="scope.row.market_price"
                        placeholder="小计"
                        class="wid110"
                        :ref="'market_price' + scope.$index"
                        @input="val => inputchnage(val, scope, 2)"
                        :disabled="scope.row.disabled"
                        @keyup.native="keyPress($event, scope.$index, 3)"
                      ></el-input>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="备注"
                    prop="remark"
                    width="350"
                    class-name="main_hei"
                  >
                    <template slot-scope="scope">
                      <el-form-item label-width="0" label="">
                        <el-input
                          v-model.trim="scope.row.remark"
                          placeholder="备注"
                          class="wid240"
                          :ref="'remark' + scope.$index"
                          :disabled="scope.row.disabled"
                          @keyup.native="keyPress($event, scope.$index, 4)"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>其他</div>
          </div>
          <div class="main_xq">
            <ul class="boxha">
              <li class="main_w100 box marginTop20">
                发票类型：
                <div class="box main_xqi" style="margin-top: -4px">
                  <el-select
                    v-model.trim="monitorForm.form.invoice_type"
                    placeholder="选择发票"
                    @change="$forceUpdate()"
                  >
                    <el-option
                      v-for="(item,index) in this.base.invoice_type"
                      :key="item"
                      :label="item?item:'不设置'"
                      :value="index"
                    >
                    </el-option>
                  </el-select>
                </div>
              </li>
              <li
                class="main_w100 box marginTop15 marginBottom15"
                v-for="(other_list, index) in monitorForm.other_list"
                :key="index"
              >
                <p class="base_p">{{ index == 0 ? "其他费用：" : "" }}</p>
                <div class="box main_xqi" style="margin-top: -4px">
                  <el-input
                    v-model.trim="other_list.descr"
                    placeholder="描述"
                    clearable
                    class="wid240"
                  ></el-input>
                  <el-input
                    v-model.trim="other_list.money"
                    placeholder="金额"
                    clearable
                    class="wid140 marginLeft15"
                  ></el-input>
                  <div class="main_page_top" v-if="index == 0">
                    <svg
                      aria-hidden="true"
                      width="15"
                      height="15"
                      @click="plus"
                    >
                      <use xlink:href="#icon-commodity_plus" />
                    </svg>
                  </div>
                  <div class="main_page_top" style="margin-left: 8px" v-else>
                    <svg
                      aria-hidden="true"
                      width="22"
                      height="22"
                      @click="reduce(index)"
                    >
                      <use xlink:href="#icon-commodity_reduce" />
                    </svg>
                  </div>
                </div>
              </li>
              <li class="main_w100">
                合计：<span>{{ total }}</span>
              </li>
              <li class="main_w100 box marginTop20">
                备注：
                <div class="box main_xqi" style="margin-top: -4px">
                  <el-input
                    v-model.trim="monitorForm.form.remark"
                    placeholder="备注"
                    clearable
                    style="width: 60%"
                  ></el-input>
                </div>
              </li>
              <li class="main_w100 box marginTop20">
                收据、发票等凭证上传：<span style="color: red"
                  >（图片只能上传3张）</span
                >
              </li>
              <li style="width: 100%">
                <div class="main_xqs">
                  <div class="box main_xqi">
                    <div class="main_upImg">
                      <el-upload
                        :action="uploadPath"
                        :headers="{
                          Authorization: getToken()
                        }"
                        list-type="picture-card"
                        :on-success="handSuccess"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :limit="3"
                        :file-list="filelist"
                        :data="uploadParams"
                      >
                        <span slot="default">
                          <svg
                            aria-hidden="true"
                            class="main_page_svg"
                            width="32"
                            height="27"
                          >
                            <use xlink:href="#icon-commodit_camera" />
                          </svg>
                        </span>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                        <img :src="dialogImageUrl" alt />
                      </el-dialog>
                      <div class="clearfix"></div>
                    </div>
                  </div>
                </div>
                <div class="clearfix"></div>
              </li>
            </ul>
          </div>

          <div class="newConBox_p200 paddingBottom10" id="newConBox">
            <div class="newConBox_h32">
              <div
                :class="['mainor_pr boxdq newConBox ', { on: searchBarFixed }]"
              >
                <div class="mainor_prl">
                  <el-button
                    type="primary"
                    @click="preservation(1)"
                    v-repeatClick
                    :loading="btn_loading"
                    :disabled="table_loading"
                    >部分采购</el-button
                  >
                  <el-button
                    v-repeatClick
                    @click="preservation(2)"
                    :loading="btn_loading"
                    :disabled="table_loading"
                    >全部采购</el-button
                  >
                  <el-button
                    v-repeatClick
                    @click="preservation(0)"
                    :loading="btn_loading"
                    :disabled="table_loading"
                    >保存</el-button
                  >
                  <el-button @click="$router.back(-1)">取消</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
const shuju = {
  other_list: {
    descr: "",
    money: ""
  }
};
const keyupType = {
  1: "num",
  2: "price",
  3: "market_price",
  4: "remark"
};
import {
  purchase_info,
  purchase_base,
  purchase_entryList
} from "@/api/purchasing/purchasingPurchase";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import rules from "@/rules/purchasing/purchasingPurchase_record";
import { parseTime } from "@/utils/index";
import { uploadPath, purchase_Batch } from "@/api/currency";
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["avatar", "is_batch"]),
    total() {
      let sz = 0;
      let lz = 0;
      // 其他费用
      this.monitorForm.other_list.forEach(e => {
        sz += parseFloat(e.money) ? parseFloat(e.money) : 0;
      });
      // 订单费用
      this.monitorForm.list.forEach(e => {
        lz += parseFloat(e.market_price) ? parseFloat(e.market_price) : 0;
      });
      return lz + sz + parseFloat(this.info.money)
        ? this.$toFixed(lz + sz + parseFloat(this.info.money))
        : "0.00";
    }
  },

  components: {},
  data() {
    return {
      // 验证
      rules,
      // 上传图片
      filelist: [],
      uploadPath,
      dialogImageUrl: "",
      dialogVisible: false,
      // 时间
      parseTime,
      // 基本信息
      info: {
        money: 0,
        purchase_time: "2020-01-01"
      },
      base: {
        auto_calculate_entry_purchase: 0,
        mode: ["自采"],
        buyer: ["自采"],
        supplier: ["自采"],
        type: ["自采"],
        status: ["自采"]
      },
      listLoading: false,
      // 列表数据
      monitorForm: {
        form: {
          status: 1,
          pics: [],
          remark: ""
        },
        list: [],
        other_list: [
          {
            descr: "",
            money: ""
          }
        ]
      },
      // 商品搜索
      formsp: {
        value: ""
      },
      // id
      id: this.$route.params.id,
      // 监听滚动
      searchBarFixed: false,
      // 凭据上传参数
      uploadParams: {
        store: "document"
      },
      isEdit: false,
      btn_loading: false,
      table_loading: false,
      is_delivery: [],
      invoice_options: [ "不设置", "普通发票","专用发票"]
    };
  },
  mounted() {
    let scrollTop =
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop;
    scrollTop + document.documentElement.clientHeight >
    document.getElementById("newConBox").offsetTop + 300
      ? (this.searchBarFixed = false)
      : (this.searchBarFixed = true);
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  created() {
    // 基本信息
    this.purchase_info();
    this.purchase_base();
  },
  beforeRouteLeave(to, from, next) {
    if (this.isEdit) {
      setTimeout(() => {
        this.$confirm(
          "您已经有数据操作，离开页面系统不会保存您的操作，确定离开吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            // 正常跳转
            next();
          })
          .catch(() => {
            next(false);
          });
      }, 200);
    } else {
      next();
    }
  },
  methods: {
    // 监听滚动
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop + document.documentElement.clientHeight >
      document.getElementById("newConBox").offsetTop + 300
        ? (this.searchBarFixed = false)
        : (this.searchBarFixed = true);
    },
    // 其他
    plus() {
      this.isEdit = true;
      let other_list = JSON.parse(JSON.stringify(shuju.other_list));
      this.monitorForm.other_list.push(other_list);
    },
    reduce(index) {
      this.isEdit = true;
      this.monitorForm.other_list.splice(index, 1);
    },
    // 置顶
    mainor_qr() {
      // goods_spu_code
      this.isEdit = true;
      let formsp = JSON.parse(JSON.stringify(this.formsp));
      let list = JSON.parse(JSON.stringify(this.monitorForm.list));
      if (formsp.value != "") {
        try {
          list.map((e, index) => {
            if (
              (e.name && e.name.includes(formsp.value)) ||
              (e.goods_spu_list.goods_spu_code &&
                e.goods_spu_list.goods_spu_code.includes(formsp.value))
            ) {
              let sz = {};
              sz = e;
              list.splice(index, 1);
              list.unshift(sz);
            }
          });
          this.monitorForm.list = list;
        } catch (error) {
          console.error(error);
        }
      }
    },
    // 上传图片-删除
    handleRemove(file) {
      const i = this.monitorForm.form.pics.findIndex(
        item => item.path == file.path
      );
      this.monitorForm.form.pics.splice(i, 1);
    },
    // 上传图片-查看
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传图片-成功
    handSuccess(res, file, fileList) {
      this.isEdit = true;
      this.monitorForm.form.pics.push({
        name: "",
        path: res.data.path,
        url: res.data.src
      });
    },
    // 删除
    scdelete(index, type) {
      this.monitorForm.list.splice(index, 1);
    },
    // 修改单价以及小计
    inputchnage(val, scope, type) {
      if (!/^-?\d*\.?\d*$/.test(val)) {
        // this.$message.error("请输入数字");
        return;
      }
      if (type == 1 && scope.row.num && val) {
        scope.row.market_price = this.$toFixed(
          parseFloat(scope.row.num) * parseFloat(scope.row.price)
        );
      } else if (type == 2 && scope.row.num && val) {
        // auto_calculate_entry_purchase ==0  自动计算单价   1  不反推单价
        if (this.base.auto_calculate_entry_purchase == 0) {
          scope.row.price = this.$toFixed(
            parseFloat(scope.row.market_price) / parseFloat(scope.row.num)
          );
        }
      } else if (type == 0) {
        if (scope.row.market_price && scope.row.num && val) {
          scope.row.price = this.$toFixed(
            parseFloat(scope.row.market_price) / parseFloat(scope.row.num)
          );
        }
        if (!scope.row.market_price && scope.row.price && val) {
          scope.row.market_price = this.$toFixed(
            parseFloat(scope.row.price) * parseFloat(scope.row.num)
          );
        }
      }
    },

    // 保存
    preservation(type) {
      let verifyArr = this.createVerify();
      Promise.all(
        verifyArr.map(item => {
          let p = new Promise((resolve, reject) => {
            this.$refs["userListFrom"].validateField(item, error => {
              resolve(error);
            });
          });
          return p;
        })
      ).then(data => {
        let list = data.filter(item => {
          if (item !== undefined && item !== "" && item !== null) {
            return item;
          }
        });
        if (list.length == 0) {
          this.handleData(type);
        } else {
          this.$message.error("请检查填写的数据");
        }
      });
      // this.$refs["userListFrom"].validate((valid) => {
      //   if (valid) {
      //   } else {
      //     console.log("保存验证未通过");
      //   }
      // });
    },
    // 生成需要验证的单独项
    createVerify() {
      let arr = [];
      function verify(val) {
        if (val === undefined || val === "") {
          return false;
        } else {
          return true;
        }
      }
      this.monitorForm.list.map((e, index) => {
        if (verify(e.num) || verify(e.price)) {
          let str1 = `list.${index}.num`;
          let str2 = `list.${index}.price`;
          arr.push(str1, str2);
        }
      });

      return arr;
    },
    // 保存数据处理
    handleData(type) {
      //1  部分采购    2  全部采购   0  保存
      let num = 0;
      let arry = [];
      let monitorForm = JSON.parse(JSON.stringify(this.monitorForm));
      monitorForm.list.map(e => {
        if (!e.disabled) {
          if (parseFloat(e.num) > 0 && parseFloat(e.price) == 0) {
            num++;
          }
          if (parseFloat(e.num) == 0 && parseFloat(e.price) > 0) {
            num++;
          }
          if (parseFloat(e.price) == NaN) {
            num++;
          }
        }
      });
      if (num > 0) {
        this.$message.error("请输入数量和单价大于0或者都不输入");
        return;
      }
      monitorForm.form.status = type;
      monitorForm.form.pics = monitorForm.form.pics.map(e => e.path).join(",");

      monitorForm.list.map(e => {
        arry.push({
          remark: e.remark,
          num: e.num,
          price: e.price,
          id: e.id,
          money: e.market_price
        });
      });
      if (type == 1 || type == 0) {
        this.btn_loading = true;
        this.purchase_entryList(monitorForm, arry);
      } else if (type == 2) {
        let list = monitorForm.list;
        let count = 0;
        let newcount = 0;
        let all = 0;
        list.map(e => {
          if (!e.disabled) {
            let num = parseFloat(e.num);
            let purchase_num = parseFloat(e.un_purchase_num);
            if (num > purchase_num || num < purchase_num) {
              count += 1;
            } else {
              all += 1;
            }
          }
          if (e.num == "") {
            newcount += 1;
          }
        });
        if (count > 0) {
          this.$confirm(
            `您有【${count}】件商品未全部采购或超过采购数量`,
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          )
            .then(() => {
              this.btn_loading = true;
              this.purchase_entryList(monitorForm, arry);
            })
            .catch(() => {});
        } else {
          this.$confirm(`您有【${all}】件商品,是否确认全部采购？`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.btn_loading = true;
              this.purchase_entryList(monitorForm, arry);
            })
            .catch(() => {});
        }
        if (newcount > 0) {
          this.$confirm(`您有【${newcount}】件商品采购数量为空`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.btn_loading = true;
              this.purchase_entryList(monitorForm, arry);
            })
            .catch(() => {});
        }
      }
    },
    // 保存到数据库
    purchase_entryList(monitorForm, arry) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
              apiUrl().appsecret
          )
        },
        apiUrl().name,
        monitorForm.form,
        {
          list: JSON.stringify(arry),
          other_money: JSON.stringify(monitorForm.other_list),
          id: this.id
        }
      );
      purchase_entryList(data).then(res => {
        this.btn_loading = false;
        if (res.errcode == 0) {
          this.$message({
            message: "保存成功",
            type: "success"
          });
          this.isEdit = false;
          this.$router.go(-1);
        } else if (res.errcode == 40035) {
          let msg = res.errmsg;
          this.$nextTick(() => {
            this.$alert(msg, "提示", {
              confirmButtonText: "确定",
              callback: action => {
                this.isEdit = false;
                this.$router.go(-1);
              }
            });
          });
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    inputFocus(scope, type) {
      type == "price" ? (scope.row.price = "") : "";
      type == "market_price" ? (scope.row.market_price = "") : "";
      type == "num" ? (scope.row.num = "") : "";
    },
    // 基本信息
    purchase_info() {
      this.table_loading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
              apiUrl().appsecret
          )
        },
        apiUrl().name,
        { id: this.id }
      );
      purchase_info(data).then(res => {
        this.table_loading = false;
        if (res.errcode == 0) {
          res.data.info.purchase_list.map(e => {
            e.batch_code = "";
            e.batch_id = 0;
            if (e.status == 1) {
              e.num = e.entry_num;
              e.price = e.entry_price;
              e.market_price = e.entry_money;
              e.disabled = true;
            } else {
              e.num = parseFloat(e.entry_num) ? e.entry_num : "";
              e.price = parseFloat(e.entry_price) ? e.entry_price : "";
              e.market_price = parseFloat(e.entry_money) ? e.entry_money : "";
              e.disabled = false;
            }
            if (
              parseFloat(e.un_purchase_num) < parseFloat(e.purchase_num) &&
              e.status == 0
            ) {
              e.un_purchase_num_tips = true;
            } else {
              e.un_purchase_num_tips = false;
            }
          });
          if (res.data.info.other_money) {
            this.monitorForm.other_list = JSON.parse(
              res.data.info.other_money.split(",")
            );
          }

          let pics = [];
          if (res.data.info.pics) {
            pics = res.data.info.pics.split(",");
          }

          let pcisArr = pics.map(e => {
            return {
              name: "",
              path: e,
              url: this.avatar.domain + e
            };
          });
          this.filelist = pcisArr;
          this.monitorForm.form.pics = pcisArr;
          this.monitorForm.form.invoice_type = res.data.info.invoice_type;
          this.monitorForm.list = res.data.info.purchase_list;
          this.monitorForm.form.remark = res.data.info.remark;
          this.info = res.data.info;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    purchase_base() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        apiUrl().name
      );
      purchase_base(data).then(res => {
        if (res.errcode == 0) {
          this.base = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },

    keyPress($event, index, type) {
      let length = this.monitorForm.list.length;
      let ref, input, pop, valueLength;

      switch ($event.keyCode) {
        // 左上右下
        case 37:
          input = this.$refs[
            keyupType[type] + index
          ].$el.offsetParent.querySelector("input");
          pop = input.selectionStart;
          valueLength = String(input.value).length;
          if (pop == 0 && type != 1) {
            type--;
            ref = keyupType[type] + index;
          }
          break;

        case 38:
          if (index > 0) {
            index--;
            ref = keyupType[type] + index;
          }
          break;
        case 39:
          input = this.$refs[
            keyupType[type] + index
          ].$el.offsetParent.querySelector("input");
          pop = input.selectionStart;
          valueLength = String(input.value).length;
          if (pop == valueLength && type != 4) {
            type++;
            ref = keyupType[type] + index;
          }

          break;
        case 40:
          if (index < length - 1) {
            index++;
            ref = keyupType[type] + index;
          }
          break;
      }
      if (ref) {
        this.$refs[ref].focus();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

/deep/ .el-upload-list__item {
  transition: none;
}
.main_upImg {
  /deep/ul {
    li {
      padding-left: 0;
    }
  }
  // /deep/.el-upload-list--picture-card .el-upload-list__item:first-child {
  //   margin-left: 145px;
  // }
}
.mainos {
  .main_tile {
    .mainos_tile_r {
      color: $colour_red;
      font-size: $font_14;
    }
  }
  .newConBox.on {
    margin-left: -10px;
  }
  .main_table {
    /deep/.el-table--small td {
      padding-top: 0;
    }
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 16px;
      margin-top: 16px;
      margin-right: 0;
    }
  }
  .main_xq {
    ul {
      li {
        .main_xqi {
          width: 80%;
          margin-left: 5px;
        }
      }
    }
  }
  .mainor_sp {
    ul {
      margin-right: 20px;
      li {
        margin-bottom: 10px;
        & > span {
          display: inline-block;
          line-height: 32px;
          width: 60px;
          color: $colour_18;
          font-size: $font_14;
          text-align: right;
          em {
            color: $colour_red;
            margin-right: 5px;
          }
        }
        &:first-child {
          & > span {
            width: 85px;
          }
        }
      }
    }
  }
  .mainor_pr {
    margin-left: 10px;
    // margin-bottom: 10px;
  }
  .base_p {
    width: 80px;
  }
  .main_page_top {
    margin-top: 7px;
    margin-left: 10px;
    use {
      fill: $menuText;
    }
    &:hover {
      cursor: pointer;
      use {
        fill: $menuActiveText;
      }
    }
  }
}
.newConBox.on {
  z-index: 100 !important;
}
.status1 {
  color: #03a98e;
}
.status0 {
  color: red;
}
.un_purchase_num_tips {
  color: red;
  font-weight: 700;
}
.new_navbar_svg {
  vertical-align: middle;
  margin-left: 5px;
  transform: translateY(-1px);
  use {
    fill: #181818;
  }
}
.table_tips {
  align-self: center;
  color: #ffbe55;
}
/deep/.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
  color: #fff;
  background-color: #c8c9cc;
  border-color: #c8c9cc;
}
</style>
